<template>
  <div class="about">
    <h2>About RubyConf</h2>
    <div class="two-col-grid">
      <div class="what padding-25-50">
        <h3>What is RubyConf?</h3>
        <p>
          <strong
            >RubyConf has been the main annual gathering of Rubyists from
            around the world since 2001.</strong
          >
        </p>
        <p>
          RubyConf is brought to you by the team at
          <a href="https://rubycentral.org">Ruby Central</a>, as well as a
          small but dedicated corps of volunteers. While we depend on the
          awesomeness of the whole Ruby community to contribute to a terrific
          experience every year, there are a few individuals that work
          especially hard to produce RubyConf.
        </p>
      </div>
      <div class="mission mission__past padding-25-50">
        <h3>Ruby Central's Mission</h3>
        <p>
          Focused on fostering the Ruby programming language and the robust
          community that has sprung up around it, RubyConf brings together
          Rubyists both established and new to discuss emerging ideas,
          collaborate, and socialize in some of the best locations in the US.
        </p>
        <p>
          One of our key goals for RubyConf is to provide an inclusive and
          welcoming experience for all participants. To that end, we have an
          anti-harassment policy that we require ALL attendees, speakers,
          sponsors, volunteers, and staff to comply with no exceptions. Review
          our <a href="../policies">Policies</a> for more details.
        </p>
      </div>
      <div class="team padding-25-50">
        <h3>Planning Team</h3>
        <ul>
          <li>
            <img src="http://rubyconf.org/img/janny.png" />
            <strong>Janny Chang, PhD</strong>
            <span>Executive Director</span>
          </li>
          <li>
            <img src="http://rubyconf.org/img/heather.png" />
            <strong>Heather Johnson</strong>
            <span>Event Producer</span>
          </li>
          <li>
            <img src="http://rubyconf.org/img/audrey.png" />
            <strong>Audrey Moreno</strong>
            <span>Sponsorship Manager</span>
          </li>
          <li>
            <img src="http://rubyconf.org/img/fred.png" />
            <strong>Fred Yates</strong>
            <span>Designer, etc.</span>
          </li>
        </ul>
      </div>
      <div class="program-committee padding-25-50">
        <h3>Program Committee</h3>
        <p>
          We're not quite ready to announce our Program Committee yet, stay
          tuned.
        </p>
      </div>
      <div class="past mission__past padding-25-50">
        <h3>
          Past RubyConf Videos<a href="/2020" style="display: none;"
            >See last year's site</a
          >
        </h3>
        <ul class="recent-videos">
          <li>
            <a
              target="_blank"
              href="https://www.youtube.com/watch?v=FTWKackp1Js&amp;list=PLbHJudTY1K0cyDs1ZwFLzlfQqvkDKt17N"
              >Virtual RubyConf</a
            >
            <strong>2020</strong>
          </li>
          <li>
            <a
              target="_blank"
              href="https://www.youtube.com/playlist?list=PLE7tQUdRKcyZDE8nFrKaqkpd-XK4huygU"
              >Nashville</a
            >
            <strong>2019</strong>
          </li>
          <li>
            <a target="_blank" href="http://confreaks.tv/events/rubyconf2018"
              >Los Angeles</a
            >
            <strong>2018</strong>
          </li>
          <li>
            <a target="_blank" href="http://confreaks.tv/events/rubyconf2017"
              >New Orleans</a
            >
            <strong>2017</strong>
          </li>
          <li>
            <a target="_blank" href="http://confreaks.tv/events/rubyconf2016"
              >Cincinnati</a
            >
            <strong>2016</strong>
          </li>
          <li>
            <a target="_blank" href="http://confreaks.tv/events/rubyconf2015"
              >San Antonio</a
            >
            <strong>2015</strong>
          </li>
          <li>
            <a target="_blank" href="http://confreaks.tv/events/rubyconf2014"
              >San Diego</a
            >
            <strong>2014</strong>
          </li>
          <li>
            <a target="_blank" href="http://confreaks.tv/events/rubyconf2013"
              >Miami</a
            >
            <strong>2013</strong>
          </li>
          <li>
            <a target="_blank" href="http://confreaks.tv/events/rubyconf2012"
              >Denver</a
            >
            <strong>2012</strong>
          </li>
          <li>
            <a target="_blank" href="http://confreaks.tv/events/rubyconf2011"
              >New Orleans</a
            >
            <strong>2011</strong>
          </li>
          <li>
            <a target="_blank" href="http://confreaks.tv/events/rubyconf2010"
              >New Orleans</a
            >
            <strong>2010</strong>
          </li>
          <li>
            <a target="_blank" href="http://confreaks.tv/events/rubyconf2009"
              >San Francisco</a
            >
            <strong>2009</strong>
          </li>
          <li>
            <a target="_blank" href="http://confreaks.tv/events/rubyconf2008"
              >Orlando</a
            >
            <strong>2008</strong>
          </li>
        </ul>
      </div>
      <div class="about-rubycentral padding-25-50">
        <h3>About Ruby Central, Inc.</h3>
        <p>
          RubyConf is organized by
          <a href="https://rubycentral.org">Ruby Central, Inc.</a>, a 501(c)3
          nonprofit organization dedicated to the support and advocacy of the
          Ruby community. Ruby Central functions as the visible presence and
          point of contact for this annual conference and other exciting Ruby
          activities.
        </p>
        <p>
          One of our key goals for RubyConf is to provide an inclusive and
          welcoming experience for all participants. To that end, we have an
          anti-harassment policy that we require ALL attendees, speakers,
          sponsors, volunteers, and staff to comply with no exceptions. Review
          our Policies page for more details.
        </p>
      </div>
    </div>
  </div>
</template>

<style lang="less">
@import '~@/assets/css/variables.less';

.about {
  h2 {
    margin-top: 50px;
    padding-top: 80px;
    background: url(http://rubyconf.org/img/about-icon.svg) center 0 no-repeat;
  }
  .what {
    background: #ea652c;
    &,
    & a {
      color: #171714;
    }
    h3 {
      color: #fffbec;
    }
  }
  .team {
    h3 {
      color: #ea652c;
    }
    li {
      position: relative;
      height: 100px;
      padding: 0 0 0 110px;
      margin: 0 0 10px;
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      border: 4px solid #171714;
      border-radius: 8px;
    }
    strong {
      font-size: @text16;
      font-weight: @fw7;
      display: block;
      color: #171714;
      padding: 25px 0 0;
    }
    small {
      font-size: @text14;
      font-weight: @fw5;
      display: block;
    }
  }
  .program-committee {
    background: #171714;
    color: #fffbec;
    h3 {
      color: #ffd801;
    }
  }
  .past {
    h3 {
      position: relative;
      a {
        float: right;
        font-family: Inter, sans-serif;
        font-weight: @fw4;
        text-transform: none;
        letter-spacing: 0;
        font-size: @text14;
      }
    }
    li {
      padding: 5px 0;
      border-bottom: 1px solid rgba(46, 46, 42, 0.1);
      display: flex;
      justify-content: space-between;
      &:last-child {
        border: none;
      }
      a {
        font-weight: @fw5;
      }
    }
  }
  .about-rubycentral {
    padding-bottom: 100px;
    h3 {
      color: #ea652c;
    }
  }
  .mission__past {
    background: #ffd801;
    color: #171714;
    a {
      color: #171714;
    }
    h3 {
      color: #ea652c;
    }
  }
}
</style>
